<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Title</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../static/css/main.css">
</head>
<body>
	<div id="page">
		<div class="page-header">
			<div class="content">
				<a class="active" href="index.html">节点列表</a>
				<a href="map.html">节点分布</a>
			</div>
		</div>
		<div class="page-body">
			<div class="content">
				<div class="system-search">
					<div class="item">
						<input id="name" name="" placeholder="名称" type="text" class="form-control" />
					</div>
					<div class="item">
						<input id="ipAddress" name="" placeholder="IP地址" type="text" class="form-control" />
					</div>
					<div class="item">
						<input id="port" name="" placeholder="端口号" type="text" class="form-control" />
					</div>
					<div class="item">
						<input id="country" name="" placeholder="国家" type="text" class="form-control" />
					</div>
					<div class="item time">
						<input id="start" name="" placeholder="开始时间" type="text" class="form-control" />
					</div>
					<div class="item time">
						<input id="end" name="" placeholder="结束时间" type="text" class="form-control" />
					</div>
					<div class="item">
						<input type="button" value="查询" class="btn primary-btn">
					</div>
				</div>
				<div class="node-list">
					<table class="table">
						<thead>
						<tr>
							<th>名称</th>
							<th>IP地址</th>
							<th>端口号</th>
							<th>地区(国家)</th>
							<th>网络质量</th>
							<th>用户名</th>
							<th>密码</th>
							<th width="160">添加时间</th>
							<th>操作</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>admin</td>
							<td>192.168.6.148</td>
							<td>:8080</td>
							<td>china</td>
							<td>6000ms</td>
							<td>Kobe</td>
							<td>Iron King</td>
							<td>2017-11-13 15:47:57</td>
							<td>
								<a data-id="1" href="javascript:;" class="btn btn-sm primary-btn view-node">查看</a>
								<a data-id="1" href="javascript:;" class="btn btn-sm danger-btn delete-node">删除</a>
							</td>
						</tr>
						<tr>
							<td>admin</td>
							<td>192.168.6.148</td>
							<td>:8080</td>
							<td>china</td>
							<td>6000ms</td>
							<td>Kobe</td>
							<td>Iron King</td>
							<td>2017-11-13 15:47:57</td>
							<td>
								<a data-id="1" href="javascript:;" class="btn btn-sm primary-btn view-node">查看</a>
								<a data-id="1" href="javascript:;" class="btn btn-sm danger-btn delete-node">删除</a>
							</td>
						</tr>
						<tr>
							<td>admin</td>
							<td>192.168.6.148</td>
							<td>:8080</td>
							<td>china</td>
							<td>6000ms</td>
							<td>Kobe</td>
							<td>Iron King</td>
							<td>2017-11-13 15:47:57</td>
							<td>
								<a data-id="1" href="javascript:;" class="btn btn-sm primary-btn view-node">查看</a>
								<a data-id="1" href="javascript:;" class="btn btn-sm danger-btn delete-node">删除</a>
							</td>
						</tr>
						<tr>
							<td>admin</td>
							<td>192.168.6.148</td>
							<td>:8080</td>
							<td>china</td>
							<td>6000ms</td>
							<td>Kobe</td>
							<td>Iron King</td>
							<td>2017-11-13 15:47:57</td>
							<td>
								<a data-id="1" href="javascript:;" class="btn btn-sm primary-btn view-node">查看</a>
								<a data-id="1" href="javascript:;" class="btn btn-sm danger-btn delete-node">删除</a>
							</td>
						</tr>
						<tr>
							<td>admin</td>
							<td>192.168.6.148</td>
							<td>:8080</td>
							<td>china</td>
							<td>6000ms</td>
							<td>Kobe</td>
							<td>Iron King</td>
							<td>2017-11-13 15:47:57</td>
							<td>
								<a data-id="1" href="javascript:;" class="btn btn-sm primary-btn view-node">查看</a>
								<a data-id="1" href="javascript:;" class="btn btn-sm danger-btn delete-node">删除</a>
							</td>
						</tr>
						<tr>
							<td>admin</td>
							<td>192.168.6.148</td>
							<td>:8080</td>
							<td>china</td>
							<td>6000ms</td>
							<td>Kobe</td>
							<td>Iron King</td>
							<td>2017-11-13 15:47:57</td>
							<td>
								<a data-id="1" href="javascript:;" class="btn btn-sm primary-btn view-node">查看</a>
								<a data-id="1" href="javascript:;" class="btn btn-sm danger-btn delete-node">删除</a>
							</td>
						</tr>
						<tr>
							<td>admin</td>
							<td>192.168.6.148</td>
							<td>:8080</td>
							<td>china</td>
							<td>6000ms</td>
							<td>Kobe</td>
							<td>Iron King</td>
							<td>2017-11-13 15:47:57</td>
							<td>
								<a data-id="1" href="javascript:;" class="btn btn-sm primary-btn view-node">查看</a>
								<a data-id="1" href="javascript:;" class="btn btn-sm danger-btn delete-node">删除</a>
							</td>
						</tr>
						<tr>
							<td>admin</td>
							<td>192.168.6.148</td>
							<td>:8080</td>
							<td>china</td>
							<td>6000ms</td>
							<td>Kobe</td>
							<td>Iron King</td>
							<td>2017-11-13 15:47:57</td>
							<td>
								<a data-id="1" href="javascript:;" class="btn btn-sm primary-btn view-node">查看</a>
								<a data-id="1" href="javascript:;" class="btn btn-sm danger-btn delete-node">删除</a>
							</td>
						</tr>
						<tr>
							<td>admin</td>
							<td>192.168.6.148</td>
							<td>:8080</td>
							<td>china</td>
							<td>6000ms</td>
							<td>Kobe</td>
							<td>Iron King</td>
							<td>2017-11-13 15:47:57</td>
							<td>
								<a data-id="1" href="javascript:;" class="btn btn-sm primary-btn view-node">查看</a>
								<a data-id="1" href="javascript:;" class="btn btn-sm danger-btn delete-node">删除</a>
							</td>
						</tr>
						<tr>
							<td>admin</td>
							<td>192.168.6.148</td>
							<td>:8080</td>
							<td>china</td>
							<td>6000ms</td>
							<td>Kobe</td>
							<td>Iron King Iron King Iron King Iron King Iron King</td>
							<td>2017-11-13 15:47:57</td>
							<td>
								<a data-id="1" href="javascript:;" class="btn btn-sm primary-btn view-node">查看</a>
								<a data-id="1" href="javascript:;" class="btn btn-sm danger-btn delete-node">删除</a>
							</td>
						</tr>
						</tbody>
					</table>
				</div>
				<div class="page-nav">
					<span class="total-page">共18页</span>
					<span class="total-num"><i>175</i>条记录</span>
					<ul>
						<li><a href="javascript:;"><i class="icon-prev"></i></a></li>
						<li><a href="">1</a></li>
						<li><a class="current" href="">2</a></li>
						<li><a href="">3</a></li>
						<li><a href="">4</a></li>
						<li><a href="">5</a></li>
						<li><a href="">...</a></li>
						<li><a href="">16</a></li>
						<li><a href="">17</a></li>
						<li><a href="">18</a></li>
						<li><a href="javascript:;"><i class="icon-next"></i></a></li>
					</ul>
					<div class="go-page">
						<span>转到</span>
						<input type="text" class="form-control input-sm">
						<a href="javascript:;" class="btn btn-sm primary-btn">确定</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../vendor/jquery.min.js"></script>
	<script src="../vendor/layer/layer.js"></script>
	<script src="../vendor/laydate/laydate.js"></script>
	<script>

        //全局配置layer日期选择器皮肤
        if( laydate ){
            laydate.skin('yalan');
        }

        //全局配置layer弹出层皮肤
        if( layer ){
            layer.config({
                skin: 'admin'
            });
        }

        var start = {
            elem: '#start',
            format: 'YYYY/MM/DD hh:mm:ss',
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function(datas){
                end.min = datas;
                end.start = datas;
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY/MM/DD hh:mm:ss',
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function(datas){
                start.max = datas;
            }
        };
        laydate(start);
        laydate(end);

        $(".delete-node").each(function(index,value){
            $(this).on("click",function(){
                var id = $(this).data("id");
                layer.confirm('你确定删除这个设备？', {
                    btn: ['确认','取消'],
                    icon:3
                }, function(){
                    //这里是确认操作
                    layer.msg('删除成功', {icon: 1});
                }, function(){

                });
            })
        })


        $(".view-node").each(function(index,value){
            $(this).on("click",function(){
                var id = $(this).data("id");
                layer.open({
                    type: 2,
                    area: ['734px', '540px'],
                    fixed: false,
                    title:"节点信息",
                    maxmin: false,
                    content: 'viewNode.html?id='+id
                })
            })
        })


	</script>
</body>
</html>